<template>
  <div class="china-map">
    <div id="map" ref="chinaMap" class="map" :style="{width: width, height: height}"></div>
    <div class="landmark-detail" v-if="showDetail">
      <span class="close-btn" @click="close()">&times;</span>
      <div>
        <div class="title">{{ province }}创作者</div>
        <div v-for="item in userList" :key="item" style="display: flex; align-items: center;margin-bottom: 10px;">
          <img :src="item.avatar"/>
          <div class="landmark-name">{{ item.nickname }}</div>        
        </div>
      </div>
    </div>
  </div>
  </template>
  
  <script setup>
  import * as echarts from 'echarts'
  import chinaJSON from '../assets/json/china-map.json'
  import { onMounted, ref } from 'vue'
  import { userMap, userMapDetail } from '@/api/pcApi.js'

  const props = defineProps(['width', 'height'])

  const showDetail = ref(false)
  const province = ref('')
  const userList = ref([])

  const chinaMap = ref()
  let regions = [
  //  {
  //   name: '新疆维吾尔自治区',
  //   itemStyle: {
  //    areaColor: '#374ba4',
  //    opacity: 1,
  //   },
  //  },
  //  {
  //   name: '四川省',
  //   itemStyle: {
  //    areaColor: '#fe9b45',
  //    opacity: 1,
  //   },
  //  },
  //  {
  //   name: '陕西省',
  //   itemStyle: {
  //    areaColor: '#fd691b',
  //    opacity: 1,
  //   },
  //  },
  //  {
  //   name: '黑龙江省',
  //   itemStyle: {
  //    areaColor: '#ffc556',
  //    opacity: 1,
  //   },
  //  },
  ]
  let scatter = []

  const fetchData = () => {
    return userMap().then((res) => {
      scatter = res.map(item => {
        return { name: item.name, value: [item.lng, item.lat, item.count], code: item.code, count: item.count }
      })
      // 省份点亮色块数据
      regions = res.map(item => { return { name: item.name, itemStyle: { areaColor: '#374ba4', opacity: 1 }}})
      drawChina()
    }).catch(_ => {})
  }

  const drawChina = () => {
   var myChart = echarts.init(chinaMap.value)
   echarts.registerMap('china', chinaJSON) //注册可用的地图
   /** @type EChartsOption */
   var option = {
    geo: {      
     map: 'china',
     aspectScale: 1, //缩放比例
     roam: true, //是否允许缩放，拖拽
     zoom: 1.5, //初始化大小
     //缩放大小限制
     scaleLimit: {
       min: 1.2, //最小
       max: 1.5, //最大
      },
      //设置中心点
      center: [104.12, 35], //中心点
      // z: 5, //地图层级
      //省份地图添加背景
      regions: regions,
      itemStyle: {
        areaColor: '#fff',
        color: 'red',
        borderColor: '#df9399',
        borderWidth: 2,
      },
    //  高亮状态
      emphasis: {
       itemStyle: {
        areaColor: '#fcf0b2',
        color: '#fff',
       },
      },
    },
    //配置属性
    series: {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      data: scatter, 
      showEffectOn: 'render',
      rippleEffect: {
       //涟漪特效相关配置
       brushType: 'stroke', //波纹的绘制方式，可选 'stroke' 和 'fill'
       scale: 4, //波纹圆环最大限制，值越大波纹越大
      },
      emphasis: {  //是否开启鼠标 hover 的提示动画效果
        scale: true
      },
      label: {
       //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
      //  normal: {
        show: true, //是否显示标签
        formatter: '{b}',
        position: 'right',
        backgroundColor: 'rgba(255,255,255,0.7)',
        borderColor: '#91747d',
        borderWidth: 1,
        borderRadius: 4,
        padding: [5, 10],
        color: '#333',
        formatter: function(params) {
          return params.data.count 
            ? `${params.name}\n${params.data.count}人` 
            : params.name;
        },
      //  },
      },
      itemStyle: {
       // 图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时
      //  normal: {
        color: '#af0015', //散点的颜色
        shadowBlur: 15,
        shadowColor: '#fff',
        fontSize: '12px',
      //  },
      },
      zlevel: 1
     },
   }
   myChart.setOption(option)
   myChart.on('click', function (params) {
    if (params.data?.code) {
      province.value = params.name
      getProvinceDetail(params.data.code)
    }
   })
  }

  const getProvinceDetail = (id) =>{
    return userMapDetail(id).then((res) => {
      userList.value = res || []
      if (res.length > 0) {
        showDetail.value = true
      }
      return res || []
    }).catch(_ => {})
  }

  const close = () => {
    showDetail.value = false
    province.value = ''
  }
  
  onMounted(() => {
    fetchData()
  })
  </script>
  
  <style lang="less" scoped>
  .china-map {
    .map {
      width:100%;
    }
    .landmark-detail {
      position: absolute;
      top: 80px;
      right: 20px;
      width: 300px;
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      padding: 20px;
      box-sizing: border-box;
      z-index: 1000;
      overflow-y: auto;
      .title {
        font-size: 18px; font-weight: 700;margin-bottom: 16px;
      }
      .close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        font-size: 20px;
        color: #999;
        transition: color 0.3s;
        &:hover {
          color: #333;
        }
      }
      .user-item {
        display: flex; 
        align-items: center;
      }
      img {
        width: 52px;
        height: 52px;
        border-radius: 50%;
      }
      .landmark-name {
      margin-left: 16px;
      }
    }
  }
  </style>
  